<template>
	<view class="vip-container">
		<!-- <u-navbar
      title="会员中心"
      :border="false"
      fixed
      placeholder
      :autoBack="true"
    /> -->
		<view class="features">
			<text class="section-title">会员特权</text>
			<view class="feature-grid">
				<view class="feature-item" v-for="feature in features" :key="feature.id">
					<!-- <image :src="feature.icon" class="feature-icon"></image> -->
					<text class="feature-title">{{ feature.title }}</text>
					<text class="feature-desc">{{ feature.description }}</text>
				</view>
			</view>
		</view>
		<view class="plans">
			<text class="section-title">会员套餐</text>
			<view class="" style="text-align: center; font-size: 36rpx" v-if="iosPlay == 1 && systemInfo.osName == 'ios'">IOS暂不提供会员服务</view>
			<view class="plan-grid" v-else>
				<view class="plan-item" v-for="plan in plans" :key="plan.id" :class="{ 'plan-item-active': selectedPlan === plan.id }" @tap="selectPlan(plan)">
					<text class="plan-name">{{ plan.plan_name }}</text>
					<text class="plan-original-price">
						折扣价：
						<text style="font-size: 36rpx">¥{{ plan.original_price }}</text>
					</text>
					<text class="plan-price">
						原价：
						<text style="text-decoration: line-through; font-size: 32rpx">¥{{ plan.price }}</text>
					</text>
					<view class="benefits">
						<text class="benefit-item">{{ plan.description }}</text>
						<text class="benefit-item">有效期{{ plan.duration }}个月</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-bar" v-if="iosPlay == 0">
			<button class="purchase-btn" type="primary" @tap="handlePurchase" :disabled="!selectedPlan">立即开通会员</button>
		</view>

		<tabbarVue :selectedTabbar="1" />
	</view>
</template>

<script>
import tabbarVue from '../../components/tabbar.vue';
export default {
	components: {
		tabbarVue
	},
	data() {
		return {
			selectedPlan: null,
			features: [
				{
					id: 1,
					icon: '/static/images/member/vip-icon.png',
					title: '专属标识',
					description: '尊贵会员标识，彰显身份'
				},
				{
					id: 2,
					icon: '/static/images/member/discount-icon.png',
					title: '免费畅听',
					description: '畅听全站所有音频'
				},
				{
					id: 3,
					icon: '/static/images/member/service-icon.png',
					title: '专属客服',
					description: '7*24小时专属客服服务'
				}
			],
			plans: [],
			agree: true,
			iosPlay: 0,
			systemInfo: null
		};
	},
	onShow() {
		this.getUser();
		this.getPlans();
		let that = this;
		uni.getSystemInfo({
			success(res) {
				that.systemInfo = res;
			}
		});
	},
	methods: {
		getUser() {
			let PostData = {
				ac: 'getmyinfo'
			};
			uni.$u.http.post('', PostData).then((res) => {
				console.log('用户信息', res);
				this.$u.vuex('vuex_user.data', res);
			});
		},
		getPlans() {
			let PostData = {
				ac: 'getship'
			};
			uni.$u.http.post('', PostData).then((res) => {
				console.log('商品列表', res);
				this.iosPlay = res.iosvip;
				this.plans = res.list;
			});
		},
		selectPlan(plan) {
			this.selectedPlan = plan.id;
		},
		async handlePurchase() {
			if (!this.selectedPlan) {
				uni.showToast({
					title: '请选择会员套餐',
					icon: 'none'
				});
				return;
			}
			try {
				const selectedPlan = this.plans.find((plan) => plan.id === this.selectedPlan);

				// 调用支付接口
				const payResult = await this.createOrder(selectedPlan);

				// 根据不同平台调用相应的支付方式
				await this.wxPay(payResult);
			} catch (error) {
				uni.showToast({
					title: '支付失败，请重试',
					icon: 'none'
				});
			}
		},
		createOrder(plan) {
			// 创建订单的具体实现
			return new Promise((resolve, reject) => {
				// 这里调用后端接口创建订单
				let PostData = {
					ac: 'getvip',
					ship_id: plan.id
				};
				uni.$u.http
					.post('', PostData)
					.then((res) => {
						resolve(res);
					})
					.catch((err) => {
						uni.showToast({
							title: '获取支付信息失败',
							icon: 'none'
						});
						reject(err);
					});
			});
		},
		wxPay(payResult) {
			// 微信支付实现
			console.log('微信支付', payResult);

			uni.requestPayment({
				provider: 'wxpay',
				appId: payResult.appId,
				nonceStr: payResult.nonceStr,
				package: payResult.package,
				paySign: payResult.paySign,
				signType: payResult.signType,
				timeStamp: payResult.timeStamp,
				success(payres) {
					console.log('支付成功', payres);
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					this.getUser();
				},
				fail(payerr) {
					console.log('支付失败', payerr);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.vip-container {
	min-height: 100vh;
	background-color: #ffffff;
	padding: 30rpx;
}
.section-title {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	margin: 40rpx 0;
	color: #333333;
}

.feature-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 20rpx;

	.feature-item {
		width: 24%;
		background-color: #f8f9fa;
		border-radius: 24rpx;
		padding: 40rpx 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;
		text-align: center;

		.feature-icon {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 20rpx;
		}

		.feature-title {
			display: block;
			font-size: 28rpx;
			font-weight: bold;
			margin: 20rpx 0;
			color: #333333;
		}

		.feature-desc {
			display: block;
			font-size: 24rpx;
			color: #666666;
			line-height: 1.6;
		}
	}
}
.plan-grid {
	padding: 20rpx;
	margin-bottom: 100rpx;
	.plan-item {
		background-color: #f8f9fa;
		border-radius: 24rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		position: relative;

		&-active {
			border: 3rpx solid #4caf50;
			background-color: #ffffff;

			&::after {
				content: '';
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				width: 40rpx;
				height: 40rpx;
				background: #4caf50;
				border-radius: 50%;
			}
		}

		.plan-name {
			display: block;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.plan-price {
			display: block;
			// font-size: 32rpx;
			color: #4caf50;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.plan-original-price {
			display: block;
			// font-size: 36rpx;
			color: #4caf50;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.benefits {
			.benefit-item {
				display: block;
				font-size: 26rpx;
				color: #666;
				margin-bottom: 10rpx;

				&:before {
					content: '•';
					margin-right: 10rpx;
				}
			}
		}
	}
}
.bottom-bar {
	// position: fixed;
	// left: 0;
	// right: 0;
	// bottom: 0;
	background-color: #ffffff;
	padding: 20rpx 40rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

	.xieyi {
		line-height: 40rpx;
		font-size: 28rpx;
	}
	.purchase-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(135deg, #4caf50, #45a049);
		color: #ffffff;
		border-radius: 40rpx;
		font-size: 32rpx;
		box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
		border: none;

		&:active {
			transform: translateY(2rpx);
		}
	}
}
</style>
